<template>
  <div class="container">
    <el-form
      ref="form"
      :model="form"
      label-width="125px"
    >
      <!--      基础信息-->
      <oms-purchase-title style="padding-bottom:20px">
        <span slot="left">基础信息</span>
      </oms-purchase-title>
      <el-form-item
        label="项目名称"
        prop="projectName"
        :rules="{ required: true, message: '请输入项目名称', trigger: 'blur' }"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.projectName"
          placeholder="项目名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="工程属性">
        <el-radio-group
          v-model="form.projectAttributes"
          :disabled="eDisabled"
        >
          <el-radio
            :label="1"
          >
            新建
          </el-radio>
          <el-radio
            :label="2"
          >
            改造
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工程类型">
        <el-radio-group
          v-model="form.projectType"
          :disabled="eDisabled"
        >
          <el-radio
            :label="1"
          >
            分行
          </el-radio>
          <el-radio
            :label="2"
          >
            支行
          </el-radio>
          <el-radio
            :label="3"
          >
            营业网点
          </el-radio>
          <el-radio
            :label="4"
          >
            自助银行
          </el-radio>
          <el-radio
            :label="5"
          >
            ATM
          </el-radio>
          <el-radio
            :label="6"
          >
            保管箱
          </el-radio>
          <el-radio
            :label="7"
          >
            金库
          </el-radio>
          <el-radio
            :label="8"
          >
            银亭
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!--      申请单位-->
      <oms-purchase-title style="padding:20px 0">
        <span slot="left">申请单位信息</span>
      </oms-purchase-title>
      <el-form-item
        label="申请单位"
        prop="concatPersonPhone"
        :rules="{ required: true, message: '请输入申请单位', trigger: 'blur' }"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.requestOrgan"
          placeholder="申请单位"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="负责人"
        prop="principal"
        :rules="{ required: true, message: '请输入负责人', trigger: 'blur' }"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.principal"
          placeholder="负责人"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="联系地址"
        prop="address"
        :rules="{ required: true, message: '请输入联系地址', trigger: 'blur' }"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.address"
          placeholder="联系地址"
        ></el-input>
      </el-form-item>
      <!--      <el-form-item-->
      <!--        label="负责人电话"-->
      <!--        prop="principalPhone"-->
      <!--        :rules="[{ required: true, message: '请输入负责人电话', trigger: 'blur' },-->
      <!--                 { pattern: $_util.regexp.mobilePhone , message: '电话格式不正确', trigger: 'blur' }-->
      <!--        ]"-->
      <!--      >-->
      <!--        <el-input-->
      <!--          :disabled="eDisabled"-->
      <!--          v-model="form.principalPhone"-->
      <!--          placeholder="负责人电话"-->
      <!--        ></el-input>-->
      <!--      </el-form-item>-->
      <!--      联系人-->
      <oms-purchase-title style="padding:20px 0">
        <span slot="left">联系人信息</span>
      </oms-purchase-title>
      <el-form-item
        label="联系人"
        prop="concatPerson"
        :rules="{ required: true, message: '请输入联系人', trigger: 'blur' }"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.concatPerson"
          placeholder="联系人"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="联系人电话"
        prop="concatPersonPhone"
        :rules="[{ required: true, message: '请输入联系人电话', trigger: 'blur' },
                 { pattern: $_util.regexp.mobilePhone , message: '电话格式不正确', trigger: 'blur' }
        ]"
      >
        <el-input
          :disabled="eDisabled"
          v-model="form.concatPersonPhone"
          placeholder="联系人电话"
        ></el-input>
      </el-form-item>
      <!--      <el-form-item-->
      <!--        label="联系地址"-->
      <!--        prop="concatAddress"-->
      <!--        :rules="{ required: true, message: '请输入联系地址', trigger: 'blur' }"-->
      <!--      >-->
      <!--        <el-input-->
      <!--          :disabled="eDisabled"-->
      <!--          v-model="form.concatAddress"-->
      <!--          placeholder="联系地址"-->
      <!--        ></el-input>-->
      <!--      </el-form-item>-->
      <!--      资料-->
      <oms-purchase-title style="padding:20px 0">
        <span slot="left">资料信息</span>
      </oms-purchase-title>
      <div
        style="display: inline-block;padding: 30px;width: 50%"
        v-for="(item,index) in form.annex"
        :label="item.label"
        :key="index"
      >
        <template v-if="index<8">
          <span
            style="
        color: #879BBA;
        font-size: 14px;
        vertical-align: top;
        display:inline-block;
        text-align: right;
        margin-right: 20px;
        font-weight: bold;
        width: 120px"
          >
            {{ index+1 }}. {{ item.label }}
          </span>
          <Upload
            style="width: 300px;display: inline-block"
            :disabled="eDisabled"
            v-model="item.value"
            :max="8"
          />
        </template>
      </div>
      <!--中期验收 工程检测数据-->
      <template v-if="showMiddleData">
        <oms-purchase-title style="padding:20px 0">
          <span slot="left">中期检测</span>
        </oms-purchase-title>
        <template v-for="(item,index) in form.annex">
          <div
            v-if="index===8"
            style="display: inline-block;padding: 30px;width: 50%"
            :label="item.label"
            :key="index"
          >
            <span
              style="
        color: #879BBA;
        font-size: 14px;
        vertical-align: top;
        display:inline-block;
        text-align: right;
        margin-right: 20px;
        font-weight: bold;
        width: 120px"
            >
              {{ index+1 }}. {{ item.label }}
            </span>
            <Upload
              style="width: 300px;display: inline-block"
              :disabled="eDisabled"
              v-model="item.value"
              :max="8"
            />
          </div>
        </template>

        <oms-purchase-title style="padding:20px 0">
          <span slot="left">工程验收</span>
        </oms-purchase-title>
        <template v-for="(item,index) in form.annex">
          <div
            v-if="index===9"
            style="display: inline-block;padding: 30px;width: 50%"
            :label="item.label"
            :key="index"
          >
            <span
              style="
        color: #879BBA;
        font-size: 14px;
        vertical-align: top;
        display:inline-block;
        text-align: right;
        margin-right: 20px;
        font-weight: bold;
        width: 120px"
            >
              {{ index+1 }}. {{ item.label }}
            </span>
            <Upload
              style="width: 300px;display: inline-block"
              :disabled="eDisabled"
              v-model="item.value"
              :max="8"
            />
          </div>
        </template>
      </template>

      <el-form-item style="margin-top: 70px">
        <el-button
          type="success"
          @click="onSubmit"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script src="./AddDefaultForm.js"></script>
<style scoped>
  .container {
    padding: 40px 30px;
  }
</style>
